<template>
  <div>
    <div class="banner">
      <h1 class="banner-title">标签</h1>

      <div class="items tag-box">
        <router-link :to="'/tag/' + tag" v-for="(tag, index) in tags" :key="index">
          <el-tag
            :class="tag === $route.params.name ? 'tag-selected' : ''"
            effect="plain"
            size="small"
            >{{ tag }}</el-tag
          >
        </router-link>
      </div>
    </div>
    <el-row :gutter="0">
      <el-col :span="14" :offset="5">
        <!-- <div class="tag-box">
          <router-link :to="'/tag/' + tag" v-for="(tag, index) in tags" :key="index">
            <el-tag
              :class="tag === $route.params.name ? 'tag-selected' : ''"
              effect="plain"
              size="small"
              >{{ tag }}</el-tag
            >
          </router-link>
        </div> -->
        <article-item
          v-for="article in pageInfo.records"
          :key="article.id"
          :article="article"
        ></article-item>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pageInfo.current"
          :page-size="pageInfo.size"
          layout="prev, pager, next, jumper"
          :total="pageInfo.total"
          :hide-on-single-page="true"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/http/request";

export default {
  name: "Tag",
  data() {
    return {
      pageInfo: [],
      tags: [],
    };
  },
  components: {
    ArticleItem: () => import("@/components/ArticleItem.vue"),
  },
  methods: {
    getArticlesInTagView(page, limit) {
      const tag = this.$route.params.name;
      if (tag === "all") {
        request
          .getArticles(page, limit)
          .then((res) => {
            if (res.code === 0) {
              this.pageInfo = res.data;
            } else {
              this.$notify.error({
                title: "提示",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$notify.error({
              title: "提示",
              message: "网络繁忙，文章获取失败",
            });
          });
      } else {
        request
          .getArticlesByTag(tag, page, limit)
          .then((res) => {
            if (res.code === 0) {
              this.pageInfo = res.data;
            } else {
              this.$notify.error({
                title: "提示",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$notify.error({
              title: "提示",
              message: "网络繁忙，文章获取失败",
            });
          });
      }
    },
    // 组件创建的时候调用 loadData 函数从后端获取数据，如果路径参数为 all 的话就获取总的文章，否则根据分类获取文章
    loadData() {
      request
        .getAllTags()
        .then((res) => {
          if (res.code === 0) {
            this.tags = res.data;
          } else {
            this.$notify.error({
              title: "提示",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$notify.error({
            title: "提示",
            message: "网络繁忙，标签获取失败",
          });
        });
      this.getArticlesInTagView(1, 5);
    },
    handleCurrentChange(page) {
      this.getArticlesInTagView(page, 5);
    },
  },
  //beforeRouteUpdate 函数在当前路由改变，但是该组件被复用时调用
  beforeRouteUpdate(to, from, next) {
    next();
    console.log(to);
    console.log(from);
    this.loadData();
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped>
.items {
  margin: 0 24px;
  display: flex;
  justify-content: center;
  position: relative;
  top: 170px;
}
.banner {
  /* position: absolute; */
  background-color: #49b1f5 !important;
  top: -60px;
  left: 0;
  right: 0;
  height: 360px;
  animation: header-effect 1s;
  opacity: 0.8;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/other/ot1%20%284%29.jpg")
    center center / cover no-repeat;
}
.banner-title {
  animation: title-scale 1s;
  position: absolute;
  top: 6.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}

/* .tag-box {
  margin: 10px 0;
} */
.tag-box .el-tag {
  margin: 0 2px;
}
.tag-box .el-tag:hover {
  background-color: #409eff;
  color: #ffffff;
  cursor: pointer;
}
.tag-selected {
  background-color: #409eff;
  color: #ffffff;
  cursor: pointer;
}
.el-pagination {
  margin: 20px 0;
  text-align: center;
}

/* // page-sizes选择器 */
::v-deep .el-select-dropdown__item li{
  background-color:transparent !important;
}
/* // prev和next箭头的样式 */
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev{
  background:transparent !important;
  background-color:transparent !important;
}
/* // prev和next箭头disabled的样式 */
::v-deep .el-pagination button:disabled {
  background-color:transparent !important;
}
/* // 页码样式 */
::v-deep .el-pager li{
  background-color:transparent !important;
}
/* // active的页码样式 */
::v-deep .el-pager li.active{
  color: #267aff !important;
}
</style>
